<template>
	<view class="addcreation bg">
		<scroll-view :scroll-with-animation="true" :scroll-into-view="scrollIntoView" scroll-y="true" class="msg-list" :enable-flex="true">
			<view class="a_form">
				<view style="display: flex;align-items: center;margin-top: 20rpx;">
					<text class="c_title">图片名称：</text>
					<input  v-model="formData.title" class="h_title" placeholder-class="placeholder_i_input" value="" placeholder="给图片命名吧" />
				</view>
				<view class="">
					<view class="add_textarea">
						<view class="i_title">
							<text>请输入描述</text>
							<text style="margin-left: 20rpx;color: #444cfc;">智能扩写：</text>
							<tui-switch @change="cikChecked" :checked='ischecked' scaleRatio="0.7"></tui-switch>
						</view>
						
						<view class="textarea" v-if="ischecked">
							<image class="t_icon" @click="formData.kuoxiemiaoshu=''" :src="weburl" mode=""></image>
							<textarea :maxlength='-1'  v-model="formData.kuoxiemiaoshu" class="i_input" placeholder-class="placeholder_i_input" :placeholder="tudetailData.miaoshutip" />
						</view>
						<view class="textarea" v-else>
							<image class="t_icon" @click="formData.miaoshu=''" :src="weburl" mode=""></image>
							<textarea :maxlength='-1'  v-model="formData.miaoshu" class="i_input" placeholder-class="placeholder_i_input" :placeholder="tudetailData.miaoshutip" />
						</view>
					</view>
				</view>
				<view class="" @click="moreshow=!moreshow" style="display: flex;justify-content: center;">
					<tui-icon v-if="moreshow" name="arrowup" color="rgba(52, 106, 255, 1)"></tui-icon>
					<tui-icon v-else name="arrowdown" color="rgba(52, 106, 255, 1)"></tui-icon>
				</view>
				<view class="" v-if="moreshow">
					<!-- 画幅 -->
					<view class="add_picture">
						<view class="i_title">
							画幅
						</view>
						<view class="picture">
							<view v-for="(item,index) in cclist_l" :key="index" class="p_td" :class="{'p_active':formData.chicun.detail_0==item.detail_0}" @click="formData.chicun=item">
								<view class="" :class="{'p_left1':item.detail_1=='1:1','p_left2':item.detail_1=='3:4','p_left3':item.detail_1=='4:3'}">
								</view>
								<view class="p_right">
									{{item.detail_1}}
								</view>
							</view>
						</view>
					</view>
					<view class="add_imgstyle">
						<view class="i_title">
							风格{{formData.Styles}}
						</view>
						<view class="imgstyle">
							<view class="p_td" @click="formData.Styles=formData.Styles==item.name?'':item.name" v-for="(item,index) in style_info_list" :key="index">
								<image class="t_icon" :class="{'p_active':formData.Styles==item.name}" :src="item.image" mode=""></image>
								<view class="p_text">
									{{item.name}}
								</view>
							</view>

						</view>
					</view>

				</view>

				<view class="btn_bottom " @click="cikout" :class="{'op5':progress===50}">
					{{progress===0||progress===100?'生成':progress===50?'生成中':'生成失败请重新生成'}}
				</view>
			</view>

			<view class="a_result">
				<view class="" style="font-weight: 600;">
					生成作品：
				</view>
				<view class="a_img" v-if="endimgbase64">
					<image @click="onimg" :src="endimgbase64" mode="widthFix"></image>
				</view>
				<view class="a_btn" v-if="endimgbase64">
					<button class="a_btn1" @click="cikshare">
						分享
					</button>
					<view class="a_btn2" @click="cikbaoc">
						保存
					</view>
				</view>
				<view>


				</view>
			</view>
			<view id="last-msg-item"></view>
		</scroll-view>

	</view>
</template>

<script>
	// import { connectio, sendMessage, disconnect } from "@/http/websocket.js";
	export default {
		data() {
			return {
				moreshow: false,
				ischecked:false,

				progress: 0, //进度条 0没开始 50生成中 100成功  -1失败
				formData: {
					title: '',
					Styles: "",
					chicun: {},
					miaoshu: "流云，波浪，水，浪，御水术，中国风小女孩，飞舞的长发，花，东方的巨龙，青色和白色，大师作品",
					kuoxiemiaoshu: "",
				},


				tudetailData: {
					miaoshutip: "唯美少女，古装，凤凰，夜晚",
				},
				"style_info_list": [{
						"id": 1,
						"code": "101",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230928\/6b28e95400c75d83bb03f79837d4ea17.png",
						"name": "水墨画"
					},
					{
						"id": 2,
						"code": "102",
						"description_example": "",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230928\/8e09585b61cfaab83de8d2bac33d38c3.png",
						"name": "概念艺术"
					},
					{
						"id": 3,
						"code": "103",
						"description_example": "",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230928\/5594e3263907aa01b221f66bcb55839e.png",
						"name": "油画"
					},
					{
						"id": 4,
						"code": "118",
						"image": "https://lingwu.maoln.com\/uploads\/20230928\/9e268f01fed1ea0496129725e050d375.png",
						"name": "油画（梵高）"
					},
					{
						"id": 5,
						"code": "104",
						"description_example": "",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230928\/0050c80db9d91b317656a672afb0041f.png",
						"name": "水彩画"
					},
					{
						"id": 6,
						"code": "105",
						"description_example": "",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230928\/5cfec5876862fb89bf19f110d9a5ca25.png",
						"name": "像素画"
					},
					{
						"id": 7,
						"code": "106",
						"description_example": "",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230928\/bd9362c4c576efd841bb01b4492397a8.png",
						"name": "厚涂风格"
					},
					{
						"id": 8,
						"code": "107",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230928\/11941657bd7c7afdc1b67c24dde33acd.png",
						"name": "插图"
					},
					{
						"id": 9,
						"code": "108",
						"description_example": "",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230928\/906f93ba975dab927fd1399e59efa009.png",
						"name": "剪纸风格"
					},
					{
						"id": 10,
						"code": "109",
						"description_example": "",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230928\/4c4c41800cf5fba2485c5bcca4fd67f9.png",
						"name": "印象派（莫奈）"
					},
					{
						"id": 11,
						"code": "119",
						"description_example": "",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230928\/fabe2f5ecab6cc7ca074452d3dcee8a2.png",
						"name": "印象派"
					},
					{
						"id": 12,
						"code": "110",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230928\/94a0914a14a542e4ee4f47e4cc05e158.png",
						"name": "2.5D"
					},
					{
						"id": 13,
						"code": "111",
						"description_example": "",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230928\/c089667dceae29620d06004d5e421c4a.png",
						"name": "古典肖像"
					},
					{
						"id": 14,
						"code": "112",
						"description_example": "",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230928\/2bf77e8ff90776a9212cc6b9f811ba60.png",
						"name": "黑白素描"
					},
					{
						"id": 15,
						"code": "113",
						"description_example": "",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230928\/d0e517f27515edd2e94291e26dcd0125.png",
						"name": "赛博朋克"
					},
					{
						"id": 16,
						"code": "114",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230928\/04a55354a1adc5b730a7c520ec6bb665.png",
						"name": "科幻风格"
					},
					{
						"id": 17,
						"code": "115",
						"description_example": "",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230928\/c841e8475941ae032401fb3903f41ca5.png",
						"name": "暗黑风格"
					},
					{
						"id": 18,
						"code": "116",
						"description_example": "",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230928\/a20a38cfdf91665c23121f4821a91408.png",
						"name": "3D"
					},
					{
						"id": 19,
						"code": "117",
						"description_example": "",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230928\/abeb8bd352482fced88f016e96d36e04.png",
						"name": "蒸汽波"
					},
					{
						"id": 20,
						"code": "201",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230928\/2c85cb89b6e9541ad91fc9c0c9735758.png",
						"name": "日系动漫"
					},
					{
						"id": 21,
						"code": "202",
						"description_example": "",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230921\/b296bc008b7167f84b0a07f1833d1196.png",
						"name": "怪兽风格"
					},
					{
						"id": 22,
						"code": "203",
						"description_example": "",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230921\/b296bc008b7167f84b0a07f1833d1196.png",
						"name": "唯美古风"
					},
					{
						"id": 23,
						"code": "204",
						"description_example": "",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230921\/b296bc008b7167f84b0a07f1833d1196.png",
						"name": "复古动漫"
					},
					{
						"id": 24,
						"code": "301",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230921\/b296bc008b7167f84b0a07f1833d1196.png",
						"name": "卡通手绘"
					},
					{
						"id": 25,
						"code": "401",
						"description_example": "",
						"image": "https:\/\/lingwu.maoln.com\/uploads\/20230921\/b296bc008b7167f84b0a07f1833d1196.png",
						"name": "写实风格"
					}
				],

				"cclist_l": [{
						"detail_0": "512:512",
						width: 512,
						height: 512,
						"detail_1": "1:1"
					},
					{
						"detail_0": "720:1280",
						width: 720,
						height: 1280,
						"detail_1": "3:4"
					},
					{
						"detail_0": "1280:720",
						width: 1280,
						height: 720,
						"detail_1": "4:3"
					}
				],
				weburl: "https://dummyimage.com/74x74/346aff/ffffff",



				endimgbase64: '',
				statusOut: 1, //1=正常生成字 2=生成中 3=生成失败
				scrollIntoView: "",
				index: "",
			}
		},
		onLoad(e) {
		},
		onShow() {},
		onHide() {},
		destroyed() {},
		onShareTimeline() {},
		onShareAppMessage() {},
		methods: {
			// 生成图片
			cikout() {
				let Styles = ''
				if (this.formData.Styles) {
					Styles = this.formData.Styles + '风格,'
				}
				let postData = {
					title: this.formData.title,
					text: Styles + this.formData.miaoshu,
					width: this.formData.chicun.width,
					height: this.formData.chicun.height,
				}
				this.tui.request("https://www.lansekafei.cn/api/test/xunfei_url", "POST", postData).then((res) => {
					this.endimgbase64 = res.data.content
					this.formData.kuoxiemiaoshu=''
				}).catch((err) => {
					console.log(err)
					
				})
			},
			// 智能扩写
			cikChecked(e){
				this.ischecked=e.detail.value
				if(this.ischecked){
					// 开始扩写
					this.formData.kuoxiemiaoshu = this.formData.miaoshu
					let postData = {
						text: "我在绘图帮我智能扩写以下文本："+this.formData.miaoshu,
					}
					this.tui.request("https://www.lansekafei.cn/api/test/xingcheng_textV3", "POST", postData).then((res) => {
					
						this.formData.kuoxiemiaoshu = res.data.content
					}).catch((err) => {
						console.log(err)
						
					})
					// this.formData.kuoxiemiaoshu='aasasas'
				}
			},
			//保存
			cikbaoc() {
				console.log(this.endimgbase64)
				// #ifdef H5
				window.location.href = this.endimgbase64
				// #endif
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.endimgbase64,
					success: () => {
						console.log('save success');
						this.$auth.showToast("保存成功")
					}
				});
				// #endif
			},

			cikshare() {
				if (this.endimgbase64) {
					this.$auth.navigateTo("/info/appshare/appshare", {
						base64: this.endimgbase64,
						code: this.userinfo.code,
						id: this.detailData.id
					})
				}
			},
			onimg() {
				uni.previewImage({
					urls: [this.endimgbase64],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					},
				})
			},
			base64ToSave(base64data, FILE_BASE_NAME = 'tmp_base64src') {
				const fsm = uni.getFileSystemManager();
				return new Promise((resolve, reject) => {
					//format这个跟base64数据的开头对应
					const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
					if (!format) {
						reject(new Error('ERROR_BASE64SRC_PARSE'));
					}
					const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
					const buffer = wx.base64ToArrayBuffer(bodyData);
					fsm.writeFile({
						filePath,
						data: buffer,
						encoding: 'binary',
						success() {
							resolve(filePath);
						},
						fail() {
							reject(new Error('ERROR_BASE64SRC_WRITE'));
						},
					});
				});
			},

			// 滚动窗口以显示最新的一条消息
			showLastMsg() {
				// 等待DOM更新
				this.$nextTick(() => {
					// 将scrollIntoView属性设置为"last-msg-item"，以便滚动窗口到最后一条消息
					this.scrollIntoView = "last-msg-item"
					// 等待DOM更新，即：滚动完成
					this.$nextTick(() => {
						// 将scrollIntoView属性设置为空，以便下次设置滚动条位置可被监听
						this.scrollIntoView = ""
					})
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.msg-list {
		flex: 1;
		height: 0;
	}
	.addcreation {
		display: flex;
		flex-direction: column;
		padding-bottom: env(safe-area-inset-bottom);
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		//头部
		.c_title {
			position: relative;
			font-weight: 400;
			color: rgba(95, 95, 107, 1);
			display: flex;
			align-items: center;
			.navbar {
				z-index: 2;
				box-sizing: border-box;
				padding: 0 60rpx 0 36rpx;
				align-items: center;
				display: flex;
				justify-content: space-between;
				width: 100%;
			}
			.left {
				width: 18rpx;
				height: 30rpx;
			}
			.title {
				font-weight: bold;
				color: rgba(48, 48, 64, 1);
				font-size: 36rpx;
				text-align: center;
				position: absolute;
				width: 100%;
			}
		}
		.a_head {
			padding: 26rpx 40rpx 26rpx 36rpx;
			box-sizing: border-box;
			width: 690rpx;
			min-height: 140rpx;
			margin: auto;
			margin-top: 20rpx;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 0rpx 6rpx rgba(0, 0, 0, 0.06);
			letter-spacing: 0rpx;
			.h_title {
				font-size: 30rpx;
				font-weight: 700;
				line-height: 42rpx;
				color: rgba(56, 56, 56, 1);
			}
			.h_text {
				margin-top: 10rpx;
				font-size: 26rpx;
				line-height: 36.4rpx;
				color: rgba(95, 95, 107, 1);
			}
		}
		.a_form {
			display: flex;
			flex-direction: column;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin: auto;
			margin-top: 22rpx;
			width: 690rpx;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 0rpx 6rpx rgba(0, 0, 0, 0.06);
			letter-spacing: 0rpx;
			.add_input {
				border-bottom: 2rpx solid rgba(235, 235, 235, 1);
				display: flex;
				flex-direction: column;
				.i_title {
					display: flex;
					align-items: center;
					position: relative;
					height: 54rpx;
					margin-top: 33rpx;
					line-height: 54rpx;
					color: rgba(67, 67, 84, 1);
					.a_xicon {
						width: 12rpx;
						height: 36rpx;
						position: absolute;
						left: -12rpx;
					}
				}
				.i_input {
					height: 66rpx;
					line-height: 66rpx;
					color: rgba(67, 67, 84, 1);
				}
				.placeholder_i_input {
					color: rgba(163, 167, 179, 1);
				}
			}
			.add_textarea {
				// border-bottom: 2rpx solid rgba(235, 235, 235, 1);
				display: flex;
				flex-direction: column;
				.i_title {
					display: flex;
					align-items: center;
					position: relative;
					height: 54rpx;
					margin-top: 33rpx;
					line-height: 54rpx;
					color: rgba(67, 67, 84, 1);
					.a_xicon {
						width: 12rpx;
						height: 36rpx;
						position: absolute;
						left: -12rpx;
					}
				}
				.textarea {
					position: relative;
					width: 630rpx;
					height: 260rpx;
					box-sizing: border-box;
					opacity: 1;
					border-radius: 10rpx;
					background: rgba(245, 245, 249, 1);
					padding: 24rpx 24rpx 44rpx 24rpx;
					.i_input {
						height: 100%;
						color: rgba(67, 67, 84, 1);
					}
					.t_icon {
						right: 21rpx;
						bottom: 11rpx;
						position: absolute;
						width: 28rpx;
						height: 26.53rpx;
					}
					.placeholder_i_input {
						color: rgba(163, 167, 179, 1);
					}
				}
			}
			.add_reference {
				// border-bottom: 2rpx solid rgba(235, 235, 235, 1);
				display: flex;
				flex-direction: column;
				.i_title {
					display: flex;
					align-items: center;
					position: relative;
					height: 54rpx;
					margin-top: 33rpx;
					line-height: 54rpx;
					color: rgba(67, 67, 84, 1);
					.a_xicon {
						width: 12rpx;
						height: 36rpx;
						position: absolute;
						left: -12rpx;
					}
				}
				.reference {
					width: 630rpx;
					height: 260rpx;
					opacity: 1;
					border-radius: 10rpx;
					background: rgba(245, 245, 249, 1);
					border: 2rpx dashed rgba(130, 133, 170, 1);
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					.imgs {
						margin: 10rpx 0;
						// min-height: 260rpx;
						max-width: 630rpx;
						width: 100%;
						height: 100%;
					}
					.r_icon {
						width: 60rpx;
						height: 60rpx;
					}
					.r_text {
						margin-top: 23rpx;
						font-size: 28rpx;
						font-weight: 500;
						letter-spacing: 0rpx;
						line-height: 39.2rpx;
						color: rgba(163, 167, 179, 1);
						text-align: left;
						vertical-align: top;
					}
					.t_icon {
						right: 21rpx;
						bottom: 11rpx;
						position: absolute;
						width: 28rpx;
						height: 26.53rpx;
					}
					.placeholder_i_input {
						color: rgba(163, 167, 179, 1);
					}
				}
			}
			//画幅
			.add_picture {
				// border-bottom: 2rpx solid rgba(235, 235, 235, 1);
				display: flex;
				flex-direction: column;
				.i_title {
					display: flex;
					align-items: center;
					position: relative;
					height: 54rpx;
					margin-top: 33rpx;
					line-height: 54rpx;
					color: rgba(67, 67, 84, 1);
					.a_xicon {
						width: 12rpx;
						height: 36rpx;
						position: absolute;
						left: -12rpx;
					}
				}
				//画幅
				.picture {
					margin-top: 10rpx;
					position: relative;
					width: 630rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.p_td {
						border: 2rpx solid #fff;
						width: 192rpx;
						height: 80rpx;
						border-radius: 10rpx;
						background: rgba(245, 245, 249, 1);
						display: flex;
						align-items: center;
						justify-content: center;
						.p_left1 {
							width: 36rpx;
							height: 36rpx;
							opacity: 1;
							background: rgba(179, 199, 255, 1);
						}
						.p_left2 {
							width: 32rpx;
							height: 48rpx;
							opacity: 1;
							background: rgba(179, 199, 255, 1);
						}
						.p_left3 {
							width: 48rpx;
							height: 32rpx;
							opacity: 1;
							background: rgba(179, 199, 255, 1);
						}
						.p_right {
							margin-left: 20rpx;
							font-size: 28rpx;
							font-weight: 500;
							letter-spacing: 0rpx;
							line-height: 39.2rpx;
							color: rgba(67, 67, 84, 1);
							text-align: left;
							vertical-align: top;
						}
					}
					.p_active {
						border: 2rpx solid rgba(52, 106, 255, 1);
						background: rgba(227, 234, 255, 1);
					}
				}
			}
			//图片风格
			.add_imgstyle {
				display: flex;
				flex-direction: column;
				.i_title {
					display: flex;
					align-items: center;
					position: relative;
					height: 54rpx;
					margin-top: 33rpx;
					line-height: 54rpx;
					color: rgba(67, 67, 84, 1);
					.a_xicon {
						width: 12rpx;
						height: 36rpx;
						position: absolute;
						left: -12rpx;
					}
				}
				//图片风格
				.imgstyle {
					margin-top: 10rpx;
					position: relative;
					width: 630rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					overflow-x: scroll;
					.p_td {
						border: 2rpx solid #fff;
						width: 160rpx;
						text-align: center;
						.t_icon {
							width: 160rpx;
							height: 160rpx;
							border-radius: 10rpx;
							border: 2rpx solid #fff;
						}
						.p_active {
							position: relative;
							border: 2rpx solid rgba(52, 106, 255, 1);
						}
						.p_active::after {
							content: "";
							position: absolute;
							bottom: 12rpx;
							right: 12rpx;
							width: 28rpx;
							height: 28rpx;
							background-size: contain;
							background-image: url("");
						}
						.p_text {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							margin-top: 10rpx;
							font-size: 24rpx;
							font-weight: 500;
							letter-spacing: 0rpx;
							line-height: 33.6rpx;
							color: rgba(95, 95, 107, 1);
							text-align: center;
							vertical-align: top;
						}
					}
					.p_td+.p_td {
						margin-left: 38rpx;
						flex-shrink: 0;
					}
				}
			}
			.add_select {
				position: relative;
				letter-spacing: 0rpx;
				border-bottom: 2rpx solid rgba(235, 235, 235, 1);
				display: flex;
				margin-top: 27rpx;
				height: 66rpx;
				line-height: 66rpx;
				border-bottom: 2rpx solid rgba(235, 235, 235, 1);
				justify-content: space-between;
				align-items: center;
				.a_xicon {
					width: 12rpx;
					height: 36rpx;
					position: absolute;
					left: -12rpx;
				}
				.s_left {
					line-height: 39.2rpx;
					color: rgba(67, 67, 84, 1);
				}
				.s_right {
					display: flex;
					align-items: center;
					.s_text {
						line-height: 39.2rpx;
						color: rgba(163, 167, 179, 1);
					}
					.s_text2 {
						letter-spacing: 0rpx;
						line-height: 39.2rpx;
						color: rgba(67, 67, 84, 1);
					}
					.s_icon {
						margin-left: 10rpx;
						height: 19.3rpx;
						width: 10.6rpx;
					}
				}
			}
			.btn_bottom {
				margin: 37rpx auto 40rpx auto;
				width: 630rpx;
				height: 84rpx;
				line-height: 84rpx;
				border-radius: 16rpx;
				background: rgba(52, 106, 255, 1);
				font-size: 30rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
			}
		}
		.a_result {
			box-sizing: border-box;
			margin: auto;
			padding: 36rpx;
			min-height: 400rpx;
			margin-top: 24rpx;
			width: 690rpx;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 0rpx 6rpx rgba(0, 0, 0, 0.06);
			.a_img {
				margin-top: 30rpx;
				text-align: center;
				image {
					width: 620rpx;
					height: 750rpx;
				}
			}
			.a_btn:after {
				border: none;
			}
			.a_btn {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.a_btn1 {
					margin: 0;
					padding: 0;
					border: 0;
					border-radius: 0;
					width: 200rpx;
					height: 64rpx;
					line-height: 64rpx;
					opacity: 1;
					border-radius: 10rpx;
					background: rgba(255, 255, 255, 1);
					border: 2rpx solid rgba(52, 106, 255, 1);
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					color: rgba(52, 106, 255, 1);
					text-align: center;
					vertical-align: middle;
				}
				.a_btn2 {
					margin-left: 26rpx;
					width: 200rpx;
					height: 64rpx;
					line-height: 64rpx;
					opacity: 1;
					border-radius: 10rpx;
					background: rgba(52, 106, 255, 1);
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					vertical-align: top;
				}
			}
		}
		.s_content {
			margin: 36rpx 30rpx 0 30rpx;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
			padding: 26rpx 32rpx 26rpx 32rpx;
			.s_tr+.s_tr {
				border-top: 1rpx solid rgba(242, 242, 242, 1);
			}
			.s_tr {
				height: 120rpx;
				line-height: 120rpx;
				justify-content: space-between;
				display: flex;
				align-items: center;
				.c_left {
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					line-height: 39.2rpx;
					color: rgba(67, 67, 84, 1);
				}
				.c_right {
					.icon {
						height: 19.3rpx;
						width: 10.6rpx;
					}
				}
			}
		}
	}
</style>